<template>
  <view class="container">
    <ve-form ref="ve_form" :model="form">
      <ve-card :title="i_form.label" type="none" v-for="i_form in form.driveLicenseRecordList" :key="i_form.driveLicenseUseState">
        <ve-form-item :label="i_form.label" prop="driveLicenseUseTime">
          <ve-date-picker v-model="i_form.driveLicenseUseTime"></ve-date-picker>
        </ve-form-item>
        <ve-form-item :label="i_form.name" prop="driveLicenseUseState">
          <ve-radio
            v-model="i_form.depositState"
            :list="[
              { value: 1, label: '是' },
              { value: 2, label: '否' },
            ]"
          />
        </ve-form-item>
        <ve-form-item label="押金金额" unit="元" prop="depositAmount">
          <ve-input-number v-model="i_form.depositAmount" :precision="2" :min="0" :max="99999999.99" />
        </ve-form-item>
        <ve-form-item label="上传附件" labelPosition="top" :borderBottom="false" prop="fileIdList">
          <ve-upload v-model="i_form.fileIdList" maxCount="1" @on-remove="(val: any) => onRemoveFile(i_form, val)"></ve-upload>
        </ve-form-item>
      </ve-card>
    </ve-form>

    <ve-bottom-box>
      <ve-button type="primary" size="long" :loading="okLoading" @click="handleSave">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getViolationDetail, updateDriveLicenseRecord } from '@/api/asset/car-violation'
  import { cloneDeep } from '@/utils'

  const okLoading = ref(false)
  const sourceForm = {
    driveLicenseRecordList: [
      {
        label: '行驶证借出',
        name: '是否收取押金',
        driveLicenseUseState: 1,
        driveLicenseUseTime: '',
        depositState: null,
        depositAmount: null,
        fileIdList: [],
      },
      {
        label: '行驶证归还',
        name: '是否归还押金',
        driveLicenseUseState: 2,
        driveLicenseUseTime: '',
        depositState: null,
        depositAmount: null,
        fileIdList: [],
      },
    ],
  }

  const form = ref<any>(cloneDeep(sourceForm))

  // 获取行驶证记录详情
  const getDetail = async (id: any) => {
    const res: any = await getViolationDetail({ id: id })
    if (res.code === 200) {
      const data = res.result
      form.value = data
      // 初始化驾驶证记录
      if (!data.driveLicenseRecordList) {
        data.driveLicenseRecordList = sourceForm
      } else {
        sourceForm.driveLicenseRecordList.forEach((item, index) => {
          data.driveLicenseRecordList[index] = {
            ...item,
            ...data.driveLicenseRecordList[index],
          }
        })
      }
    }
  }

  onLoad((res: any) => {
    console.log('res', res)
    getDetail(res.id)
  })

  const onRemoveFile = (item: any, val: any) => {
    console.log('onChangeFile', item, val)
    item.fileIdList = val
    item.fileIds = val[0]
  }

  const handleSave = () => {
    const params = { ...form.value }
    console.log('params', params)
    updateDriveLicenseRecord(params)
      .then((res: any) => {
        okLoading.value = false
        if (res.code == 200) {
          uni.showToast({
            title: '操作成功',
            icon: 'none',
          })
          // 更新列表
          uni.$emit('refreshData')
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        } else {
          okLoading.value = false
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
        }
      })
      .catch(() => {
        okLoading.value = false
      })
  }
</script>

<style lang="less" scoped>
  .container {
    padding: 24rpx;
  }
</style>
